<!--角色权限入口文件-->
<template>
	<div class="role_auth">
		<!-- 左边导航 -->
		<div class="role_list">
			<div>
				<el-button type="primary" size="small" icon="el-icon-plus" @click="addRole">
					新建角色
				</el-button>
			</div>
			<ul class="role_nav">
				<li
					class="list_item"
					v-for="item in roleList"
					:key="item.id"
					:class="item.id === roleId ? 'list_item_active' : ''"
					@click="roleMenuSelect(item)"
				>
					<span v-text="item.name" class="role_name"></span>
					<span class="item_icon" v-if="item.name !== '超级管理员'">
						<i class="el-icon-edit-outline" @click.stop="editRole(item)"></i>
						<!-- <i class="el-icon-delete" @click.stop="deleteRole(item)"></i> -->
					</span>
				</li>
			</ul>
		</div>
		<!-- 右边内容 -->
		<div class="right_content">
			<el-tabs v-model="activeName">
				<el-tab-pane label="角色权限" name="ROLE">
					<div class="content_head">
						<!-- <h3>角色权限</h3> -->
						<el-button
							type="primary"
							@click="saveRoleAuth"
                            :loading="saveLoading"
							:disabled="roleId === 1 ? true : false"
						>
							保存
						</el-button>
					</div>
					<div class="auth_list">
						<div class="checkbox_list">
							<div>
								<el-checkbox
									:disabled="roleId === 1 ? true : false"
									v-for="item in authData"
									:label="item.choose"
									:key="item.id"
									v-model="item.choose"
									@change="handleCheck(item)"
								>
									{{ item.name }}
								</el-checkbox>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="数据权限" name="DATA">
					<el-form
						:model="authForm"
						ref="authForm"
						class="auth-ruleForm"
						label-position="top"
					>
						<el-form-item>
							<el-radio-group
								v-model="authForm.dataPermission"
								:disabled="roleId === 1 ? true : false"
							>
								<el-radio
									v-for="item in authDataList"
									:key="item.id"
									:label="item.id"
								>
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<el-button
								type="primary"
								@click="onSubmitAuth('authForm')"
                                :loading="authSaveLoading"
								:disabled="roleId === 1 ? true : false"
							>
								保存
							</el-button>
							<!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 新建角色模态窗 -->
		<el-dialog
			:title="roleTitle"
			:visible.sync="dialogFormVisible"
			width="500px"
			:close-on-click-modal="false"
			:destroy-on-close="true"
		>
			<el-form :model="roleForm" ref="roleForm" :rules="roleRules" label-width="80px">
				<el-form-item label="角色名称" prop="name">
					<el-input
						v-model.trim="roleForm.name"
						maxlength="10"
						placeholder="请输入角色名称"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :loading="btnLoading" type="primary" @click="submitForm('roleForm')">
					保存
				</el-button>
				<el-button @click="resetForm('roleForm')">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import {
	getRoleList,
	addOrUpdateRole,
	rolePermissions,
	updateRolePermissions,
	updateRoleDataAuth,
} from '@/api/auth';
export default {
	name: 'roleAuth',
	data() {
		return {
			roleList: [], // 角色列表数据
			// 角色权限树数据
			authData: [],
			dialogFormVisible: false, // 新建角色模态窗状态
			roleTitle: null, // 新建角色模态窗标题
			// 新建角色模态窗表单数据
			roleForm: {
				name: null, // 角色名称
				id: null, // 角色Id 编辑角色时用
			},
			// 表单校检
			roleRules: {
				// remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
				name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
			},

			authIds: [], // 权限ID
			roleId: null, // 角色Id
            saveLoading: false, // 加载 Loading
            authSaveLoading: false, // 加载 Loading
			btnLoading: false,
			isShow: false,
			activeName: 'ROLE',
			authForm: {
				dataPermission: null,
			},
			authDataList: [
				{ id: '3', name: '所有交易数据查询' },
				{ id: '2', name: '账户交易数据查询' },
				{ id: '1', name: '个人交易数据查询' },
			],
			radio: null,
		};
	},
	mounted() {
		this.getInitRoleList();
	},
	methods: {
		// 初始化角色列表
		getInitRoleList() {
			getRoleList().then(res => {
				if (res.success) {
					console.log('this.roleId', this.roleId);
					this.roleList = res.data;
					// 如果角色ID为假，表示首次进入权限页面，默认将角色列表中第一个为选中状态展示
					if (this.roleId === null) {
						this.roleId = res.data[0].id;
						this.authForm.dataPermission = res.data[0].dataPermission.toString();
						this.getInitAuthList(res.data[0].id);
						return;
					}
				}
			});
		},
		// 初始化权限列表
		getInitAuthList(id) {
			// this.fullscreenLoading = true;
			const par = { action: { id: id } };
			rolePermissions(par).then(res => {
				if (res.success) {
					this.authData = res.data;
					this.authIds = [];
					res.data.map(item => {
						if (item.choose) {
							this.authIds.push(item.id);
						}
					});
				}
			});
		},
		// 新建角色 Btu 事件
		addRole() {
			this.roleTitle = '新建角色';
			this.dialogFormVisible = true;
			this.roleForm = {
				name: null, // 角色名称
			};
		},
		// 编辑角色 Btu 事件
		editRole(val) {
			this.dialogFormVisible = true;
			this.roleTitle = '编辑角色';
			this.roleForm = { ...val };
		},

		// 新建/编辑角色模态窗 保存事件
		submitForm(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					this.btnLoading = true;
					// 以模态窗 标题来判断是调用 新增接口还是编辑接口
					const par = {
						action: { ...this.roleForm },
					};
					addOrUpdateRole(par)
						.then(res => {
                            this.btnLoading = false;
                            if (res.success) {
								this.$message.success('操作成功');
								this.dialogFormVisible = false;
								this.getInitRoleList(); // 刷新角色列表数据
							} else {
								this.$message.error(res.info);
							}
						})
						.catch(err => {
							this.btnLoading = false;
							this.$message.error(err.info);
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 新建/编辑角色模态窗 取消事件
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogFormVisible = false;
		},
		// 点击角色列表获取右边的权限数据
		async roleMenuSelect(val) {
			if (val) {
				// val 有值才给 roleId 赋值
				this.roleId = val.id;
				this.authForm.dataPermission = val.dataPermission.toString();
			}
			await this.getInitAuthList(this.roleId);
		},
		// 保存角色权限事件
		saveRoleAuth() {
			// 先判断保存功能权限code的 functionList 和保存角色权限code的 menuList 中是否有值，有值才调保存接口
			if (this.authIds.length > 0) {
				this.saveLoading = true; // 加载 Loading
				const par = {
					action: { id: this.roleId, permissions: [...this.authIds] },
				};
				updateRolePermissions(par)
					.then(res => {
						if (res.success) {
                            this.saveLoading = false; // 取消 Loading
                            this.$message.success('操作成功');
                            this.roleMenuSelect();
						} else {
                            this.saveLoading = false;
                            this.$message.error(res.info);
						}
					})
					.catch(err => {
                        this.saveLoading = false;
                        this.$message.error(err.info);
					});
			} else {
                this.$message.error('尚未变更权限内容，无需保存！！！');
			}
		},

		onSubmitAuth(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 以模态窗 标题来判断是调用 新增接口还是编辑接口
					this.authSaveLoading = true;
					const par = {
						action: { id: this.roleId, ...this.authForm },
					};
					updateRoleDataAuth(par)
						.then(res => {
							if (res.success) {
                                this.authSaveLoading = false;
                                this.$message.success(res.info);
                                this.getInitRoleList();
							} else {
								this.authSaveLoading = false;
								this.$message.error(res.info);
							}
						})
						.catch(err => {
							this.authSaveLoading = false;
							this.$message.error(err.info);
						});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		handleCheck(item) {
			if (item.choose) {
				this.authIds.push(item.id);
			} else {
				const index = this.authIds.indexOf(item.id);
				if (index !== -1) {
					this.authIds.splice(index, 1);
				}
			}
		},
	},
};
</script>
<style lang="scss">
.role_auth {
	padding: 20px;
	background: #fff;
	min-height: calc(100vh - 90px);
	// background: red;
	display: flex;
	.role_list {
		padding: 20px 0;
		width: 270px;
		max-height: calc(100vh - 114px);
		overflow-y: auto;
		border: 1px solid #e6e6e6;
		text-align: center;
		display: flex;
		flex-direction: column;
		.role_nav {
			margin: 20px 0;
			padding: 0;
			flex: 1;
			overflow-y: auto;
			.list_item,
			.list_item_active {
				padding: 0 30px;
				line-height: 40px;
				display: flex;
				justify-content: space-between;
				cursor: pointer;
				&:hover {
					background: #ebf3ff;
				}
				.item_icon {
					visibility: hidden;
					margin-left: 10px;
					font-size: 18px;
					.el-icon-delete {
						margin-left: 10px;
					}
				}
				&:hover .item_icon {
					visibility: visible;
				}
			}
			.list_item_active {
				background: #ebf3ff;
			}
		}
	}
	.right_content {
		margin-left: 20px;
		flex: 1;
		// display: flex;
		// flex-direction: column;
		.content_head {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.auth_list,
		.auth-ruleForm {
			max-height: calc(100vh - 245px);
			overflow: hidden;
			overflow-y: auto;
		}
		.auth-ruleForm {
			margin-left: 20px;
		}
	}
	ul li {
		list-style: none;
	}
	.checkbox_list .el-tree-node__content {
		margin-bottom: 20px;
	}
	.checkbox_list
		.list
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable {
		// width: 150px;
		display: block;
	}
	.checkbox_list
		.el-tree
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable {
		width: 170px;
		// display: inline-block;
	}
	.checkbox_list
		.el-tree
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children {
		padding-left: 60px;
		display: flex;
		flex-wrap: wrap;
	}
	// .checkbox_list
	// 	.list
	// 	.el-tree-node__children
	// 	.is-focusable
	// 	.el-tree-node__children
	// 	.is-focusable
	// 	.el-tree-node__children
	// 	.is-focusable
	// 	.el-tree-node__children {
	// 	padding-left: 80px;
	// 	display: flex;
	// 	flex-wrap: wrap;
	// }
	.checkbox_list
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable
		.el-tree-node__children
		.is-focusable
		.el-tree-node__content {
		padding: 0 !important;
	}
	.functionList .el-tree-node__children .is-focusable {
		width: 150px;
		display: inline-block;
	}
	.functionList .el-tree-node__children {
		display: flex;
		flex-wrap: wrap;
	}
	.functionList .el-tree-node__content {
		margin-bottom: 20px;
	}
	.el-checkbox {
		display: block;
		margin-top: 20px;
	}
}
</style>
